import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0301',
  templateUrl: './ex0301.component.html',
  styleUrls: ['./ex0301.component.scss']
})
export class Ex0301Component implements OnInit, AfterViewInit {
  private ctx: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.draw3(this.ctx)
  }

  draw1(ctx): void {
    ctx.beginPath()
    ctx.arc(80, 80, 50, 0, Math.PI, true)
    ctx.closePath()

    ctx.strokeStyle = 'HotPink'
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(120, 80, 50, 0, 2 * Math.PI, true)
    ctx.closePath()

    ctx.strokeStyle = 'HotPink'
    ctx.stroke()
  }

  draw2(ctx): void {
    ctx.beginPath()
    ctx.arc(70, 70, 50, 0, -Math.PI / 2, false)
    ctx.closePath()
    ctx.strokeStyle = 'HotPink'
    ctx.stroke()
  }

  draw3(ctx): void {
    ctx.beginPath()
    ctx.arc(80, 80, 50, 0, Math.PI, true)
    ctx.closePath()

    ctx.fillStyle = 'HotPink'
    ctx.fill()

    ctx.beginPath()
    ctx.arc(120, 80, 50, 0, 2 * Math.PI, true)
    ctx.closePath()
    ctx.fillStyle = '#9966FF'
    ctx.fill()
  }


}
